<style lang="less">
  @import '../../styles/common.less';
</style>

<template>
<div style="width: 480px;">
  <Form ref="courseData" :model="courseData" :rules="ruleValidate" :label-width="110">
    <FormItem label="报名名称：" prop="courseName">
      <Input v-model="courseData.courseName" placeholder="请输入名称"></Input>
    </FormItem>
    <FormItem label="报名分类：" prop="courseType">
      <Input v-model="courseData.courseType" placeholder="请输入分类"></Input>
    </FormItem>
    <FormItem label="报名人数：" prop="coursePersons">
      <Input v-model="courseData.coursePersons" placeholder="请输入报名人数"></Input>
    </FormItem>
    <FormItem label="报名时间：">
      <DatePicker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss" :start-date="new Date()" v-model="courseData.courseTime" style="width: 200px"></DatePicker>
    </FormItem>
    <FormItem label="报名内容：">
      <Input v-model="courseData.courseContext" placeholder="请输入内容"></Input>
    </FormItem>


    <FormItem>
      <Button type="primary" @click="handleSubmit('courseData')">提交</Button>
      <Button type="ghost" @click="handleReset('courseData')">清空</Button>
    </FormItem>
  </Form>
        </div>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "coursemod",
        data(){
          return{
            courseData:{
              courseName:'',
              courseType:'',
              coursePersons:0,
              courseTime:new Date(),
              courseContext:''
            },
            ruleValidate:{
              courseName:[
                {required: true,message:'请输入名称',trigger:'blur'}
              ],
              courseType:[
                {required: true,message:'请输入分类',trigger:'blur'}
              ],
              coursePersons:[
                {required: true,message:'请输入人数',trigger:'blur'}
              ]
            }
          }
        },
        methods:{
          handleSubmit(name){
            this.$refs[name].validate((valid) => {
              if (valid) {
                let dataArr = this.courseData;

                console.log(dataArr);
                this.$http.post('/school/addCourse',dataArr).then(res =>{
                  this.$Message.success('更新成功!');
                  this.handleReset(name);
                });
              }
            })
          },
          handleReset (name) {
            this.$refs[name].resetFields();
          }
        }
    }
</script>

<style scoped>

</style>
